---
title: Bifă
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Utilizat atunci când un utilizator trebuie să selecteze mai multe valori din mai multe opțiuni.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkbox } from "twenty-ui/display";

export const MyComponent = () => {
  return (
    <Checkbox
      checked={true}
      indeterminate={false}
      onChange={() => console.log("onChange function fired")}
      onCheckedChange={() => console.log("onCheckedChange function fired")}
      variant="primary"
      size="small"
      shape="squared"
    />
  );
};
```

</Tab>
<Tab title="Props">

| Proprietăți       | Tip     | Descriere                                                                                                                   |
| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| bifat             | boolean | Indică dacă bifa este selectată                                                                                             |
| indeterminat      | boolean | Indică dacă bifa este într-o stare indeterminată (nici bifată, nici nebifată)                            |
| onChange          | funcție | Funcția de callback pe care doriți să o declanșați când starea bifei se schimbă                                             |
| laSchimbareBifată | funcție | Funcția de callback pe care doriți să o declanșați când starea `bifat` se schimbă                                           |
| variantă          | șir     | Variantele vizuale ale stilului cutiei. Opțiunile includ: `primar`, `secundar` și `terțiar` |
| dimensiune        | șir     | Dimensiunea bifei. Are două opțiuni: `mic` și `mare`                                        |
| formă             | șir     | Forma bifei. Are două opțiuni: `pătrată` și `rotunjită`                                     |

</Tab>
</Tabs>
